<template>
 <view class="uni-header">
    <uni-stat-breadcrumb class="uni-stat-breadcrumb-on-phone" />
  </view>
  
  <view class="uni-container">
    <uni-forms label-align="center" class="uni-forms" ref="form" :modelValue="formData" validateTrigger="bind"
      :rules="rules">
      <uni-forms-item name="nick" label="昵称" required>
        <uni-easyinput placeholder="请输入昵称" v-model="formData.nick" trim="both" :clearable="false" />
      </uni-forms-item>
      <uni-forms-item name="username" label="登录账号" required>
        <uni-easyinput placeholder="请输入登录账号" v-model="formData.username" trim="both" :clearable="false" />
      </uni-forms-item>
      <uni-forms-item name="password" label="登录密码" required>
        <uni-easyinput type="password" placeholder="请输入登录密码" v-model="formData.password" trim="both"
          :clearable="false" />
      </uni-forms-item>
      <uni-forms-item name="passwordAgain" label="确认密码" required>
        <uni-easyinput type="password" placeholder="请输入登录密码" v-model="formData.passwordAgain" trim="both"
          :clearable="false" />
      </uni-forms-item>
      <uni-forms-item name="email" label="联系邮箱">
        <uni-easyinput placeholder="请输入联系邮箱" v-model="formData.email" trim="both" :clearable="false" />
      </uni-forms-item>
      <uni-forms-item name="mobile" label="联系手机号">
        <uni-easyinput placeholder="请输入联系手机号" v-model="formData.mobile" trim="both" :clearable="false" />
      </uni-forms-item>
      <uni-forms-item class="flex-center-x" name="roleList" label="角色" required>
        <uni-data-checkbox multiple v-model="formData.roleList" :localdata="roleList"></uni-data-checkbox>
      </uni-forms-item>
      <uni-forms-item class="flex-center-x" name="status" label="状态" required>
        <uni-data-checkbox v-model="formData.status" :localdata="statusList" />
      </uni-forms-item>
      
      <view class="uni-button-group">
        <button type="primary" class="uni-button" style="width: 100px;"
          @click="submitForm">{{$t('common.button.submit')}}</button>
        <navigator open-type="navigateBack" style="margin-left: 15px;">
          <button class="uni-button" style="width: 100px;">返回</button>
        </navigator>
      </view>
    </uni-forms>
  </view>

  <fix-window />

</template>

<script>
  import {
    mapActions
  } from 'vuex'
  import md5 from 'js-md5'
  export default {
    data() {
      return {
        formData: {},
        rules: {
          nick: {
            rules: [{
                required: true,
                errorMessage: '请输入昵称',
              },
              {
                minLength: 1,
                maxLength: 15,
                errorMessage: '昵称长度在 {minLength} 到 {maxLength} 个字符',
              },
            ]
          },
          username: {
            rules: [{
                required: true,
                errorMessage: '请输入账号',
              },
              {
                minLength: 7,
                maxLength: 15,
                errorMessage: '账号长度在 {minLength} 到 {maxLength} 个字符',
              },
              {
                pattern: /^[a-zA-Z][a-zA-Z0-9]*$/,
                errorMessage: '必需英文开头，仅包含英文和数字',
              }
            ]
          },
          password: {
            rules: [{
                required: true,
                errorMessage: '请输入账号密码',
              },
              {
                minLength: 7,
                maxLength: 20,
                errorMessage: '账号密码长度在 {minLength} 到 {maxLength} 个字符',
              }
            ]
          },
          passwordAgain: {
            rules: [{
                required: true,
                errorMessage: '请输入确认密码',
              },
              {
                minLength: 7,
                maxLength: 20,
                errorMessage: '确认密码长度在 {minLength} 到 {maxLength} 个字符',
              },
              {
                validateFunction: function(rule, value, data, callback) {
                  if (value != data.password) {
                    callback('密码不一致')
                  }
                  return true
                }
              }
            ]
          },
          email: {
            rules: [{
              format: 'email',
              errorMessage: '请输入正确的邮箱地址',
            }]
          },
          mobile: {
            rules: [{
              pattern: /^1\d{10}$/,
              errorMessage: '请输入正确的手机号',
            }]
          },
          roleList: {
            rules: [{
              required: true,
              errorMessage: '请选择角色',
            }]
          }
        }
      }
    },
    onLoad(params) {
      if (params.id) {
        this.rules.password.rules.shift();
        this.rules.passwordAgain.rules.shift();
      }

      this.buildPage(params)
    },
    methods: {
      ...mapActions({
        getUserForm: "user/form",
        saveUser: "user/save",
      }),
      async buildPage(params = {}) {
        uni.showLoading({
          mask: true,
        })

        let data = await this.getUserForm(params);



        this.statusList = [];
        Object.keys(data.statusList).forEach(key => {
          this.statusList.push({
            text: data.statusList[key],
            value: parseInt(key)
          })
        })


        data.roleList.map(item => {
          item.text = item.name;
          item.value = item.id;
        });
        this.roleList = data.roleList;


        this.formData = data.entity;

        uni.hideLoading()
      },
      submitForm() {
        uni.showLoading({
          mask: true
        })

        this.$refs.form.validate().then(data => {
          data.password = md5(data.password)
          data.passwordAgain = data.password;

          data.id = this.formData.id || 0;
          this.saveUser(data).then(res => {
            uni.showModal({
              title: "提示",
              content: "操作成功",
              confirmText: "继续添加",
              cancelText: "返回",
              success: (e) => {
                if (e.cancel) {
                  this.back()
                } else {
                  this.buildPage()
                }
              }
            })
          }).finally(_ => {
            uni.hideLoading()
          })
        }).catch(() => {
          uni.hideLoading()
        })
      },
    }
  }
</script>